<template>
<sketch-rule
    v-if="configShow"
    :thick="thick"
    :scale="canvasScale"
    :width="canvasBox().width"
    :height="canvasBox().height"
    :startX="startX"
    :startY="startY"
    :lines="lines"
></sketch-rule>
</template>

<script setup lang="ts">
import { ref, toRefs, computed, watch, PropType } from 'vue'
import { useMainStore, useSlidesStore } from '@/store'
import { storeToRefs } from 'pinia'
const { canvasScale } = storeToRefs(useMainStore())
interface ViewportStyles {
  top: number;
  left: number;
  width: number;
  height: number;
}
const props = defineProps({
    viewportStyles: {
      type: Object as PropType<ViewportStyles>,
      required: true,
    },
})
const { width, height } = {width:1920, height: 1080}

const configShow = ref(true)

// x轴标尺开始的坐标数值
const startX = -10
// y轴标尺开始的坐标数值
const startY = -10
// 标尺的厚度
const thick = 20
// 初始化水平标尺上的参考线
const lines = {
h: [],
v: []
}

const canvasBox = () => {
    const bodyheight = document.querySelector('.center-body')
    return {
        width: props.viewportStyles.width * canvasScale.value,
        height: bodyheight?.scrollHeight
    }
}
const scale = computed(() => {
return 1
})

// 颜色
const themeColor = computed(() => {
return '#cccccc'
})

// 处理标尺重制大小
watch(
() => canvasScale.value,
() => {
    // configShow.value = false
    // setTimeout(() => {
    // configShow.value = true
    // })
}
)
</script>

<style>
#mb-ruler {
/* position: fixed; */
top: 0;
left: 0;
z-index: 999;
}

.h-container {
    position: fixed !important;
    top: 62px !important;
    left: 90px !important;
    width: calc(100% - 450px) !important;
}
.righthide .h-container {
    width: calc(100% - 100px) !important;
}
.v-container {
    position: fixed !important;
    top: 90px !important;
    left: 80px !important;
    height: calc(100%) !important;
}
#mb-ruler .v-container {
height: auto !important;
}
#mb-ruler .v-container .lines .line {
/* 最大缩放 200% */
width: 200vw !important;
border-top: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .v-container .indicator {
border-bottom: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .h-container .lines .line {
/* 最大缩放 200% */
height: 200vh !important;
border-left: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .h-container .indicator {
border-left: 1px dashed v-bind('themeColor') !important;
}
#mb-ruler .indicator .value {
background-color: rgba(0, 0, 0, 0);
}
#mb-ruler .line .del {
padding: 0;
color: v-bind('themeColor');
font-size: 26px;
font-weight: 500;
}

#mb-ruler .corner {
  border-width: 0 !important;
  position: fixed !important;
  left: 55px;
  top: 62px;
}
</style>
  